<template>
    <div class="order-index">
        <el-tabs type="border-card">
            <el-tab-pane
                :label="order.label"
                v-for="order in orderStatus"
                :key="order.name"
            >
                <transition name="fade" mode="out-in">
                    <component
                        :is="tabs[order.name]"
                        v-if="orderList"
                        :orderList="orderList"
                    ></component>
                </transition>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { orderStatus } from '@/utils/constants'
import orderAll from './components/order-all.vue'
import orderCancel from './components/order-cancel.vue'
import orderComment from './components/order-comment.vue'
import orderComplete from './components/order-complete.vue'
import orderDeliver from './components/order-deliver.vue'
import orderReceive from './components/order-receive.vue'
import orderUnpay from './components/orderUnpay.vue'
import { ref, onMounted } from 'vue'
import { findOrderAll } from '@/apis/order'
const tabs = {
    orderAll,
    orderCancel,
    orderComment,
    orderComplete,
    orderDeliver,
    orderReceive,
    orderUnpay,
}
const orderList = ref('')
onMounted(() => {
    findOrderAll().then(res => {
        orderList.value = res
    })
})
</script>

<style lang="scss" scoped>
.order-index {
    :deep(.el-tabs__item) {
        // color: #da9233;
        &:hover {
            color: #da9233 !important;
        }
        &.is-active {
            color: #da9233;
        }
    }
}
</style>
